<template>
  <div>
 <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template slot="extra">
      <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定解散社团吗？"
              @confirm="disband()"
          >
            <el-button type="warning" v-if="user.role==='ROLE_MASTER'" slot="reference">解散社团<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
    </template>
    <template slot="extra">
      <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定退出社团吗？"
              @confirm="exit"
          >
            <el-button type="warning" v-if="user.role==='ROLE_CAMPUS'" slot="reference">申请退出社团<i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
    </template>
    <el-descriptions-item>
      <template slot="label">
        社团id
      </template>
      {{tableData.id}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        社团名称
      </template>
      {{tableData.campusName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        社团简介 
      </template>
      {{tableData.campusInfo}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        社团规模（人）
      </template>
      {{tableData.campusScale}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        创建时间
      </template>
      {{tableData.createTime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        社长
      </template>
      {{tableData.masterName}}
    </el-descriptions-item>
  </el-descriptions>
  </div>
  
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name: "User",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      serverIp: serverIp,
      tableData: Object,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      campusName: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      roles: [],
      courses: [],
      vis: false,
      stuCourses: [],
      stuVis: false
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/campus/mycampus?uid="+ this.user.id).then(res => {
        this.tableData = res.data
      })
      
    },
    disband(){
      console.log(this.tableData.id)
      this.request.post("/master/disband?cid="+this.tableData.id+"&mid="+this.user.id).then(res => {
        if(res.code === '200'){
          this.$message.success("申请成功")
        }else{
          this.$message.error("已申请解散此社团")
        }
      })
    },
    exit(){
      this.request.post("/member/exit?uid="+this.user.id+"&cid="+this.tableData.id).then(res => {
        if(res.code === '200'){
          this.$message.success("申请成功")
        }else{
          this.$message.error("已申请退出此社团")
        }
      })
    }

  }
}
</script>


<style>
.headerBg {
  background: #eee!important;
}
</style>
